import React, { useMemo } from 'react'
import { COLUMNS } from "./columns"
import MOCK_DATA from "./MOCK_DATA.json"
import { useTable, useColumnOrder } from 'react-table'
import "./table.css"
const ColumnOrder = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA, [])
    const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, prepareRow, setColumnOrder } = useTable({ columns, data }, useColumnOrder)
    return (
        <>
            <button
                onClick={() =>
                    setColumnOrder([
                        "phone",
                        "id",
                        "first_name",
                        "last_name",
                        "country",
                        "date_of_birth"
                    ])
                }
            >
                更改列书序
            </button>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map(item => (
                                    <th {...item.getHeaderProps()}>{item.render("Header")}</th>
                                ))
                            }

                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        rows.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render("Cell")}</td>)
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
                <tfoot>
                    {footerGroups.map(footGroup => (
                        <tr {...footGroup.getFooterGroupProps()}>
                            {footGroup.headers.map(column => (
                                <td {...column.getFooterProps()}>{column.render("Footer")}</td>
                            ))}
                        </tr>
                    ))}
                </tfoot>
            </table >
        </>
    )
}

export default ColumnOrder